<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="container mx-auto">
        <div class="flex justify-center px-6 my-12">
            <div class="w-full xl:w-2/4 lg:w-11/12 flex">
                <!-- <div class="w-full h-auto bg-gray-400 hidden lg:block lg:w-5/12 bg-cover rounded-l-lg" style="background-image: url('/images/logo.png')"></div> -->
                <div class="w-full bg-white p-5 rounded-lg lg:rounded-l-none">
                    <h3 class="pt-4 text-2xl text-center">文件翻译</h3>
                    <form class="px-8 pt-6 bg-white rounded">
                        <div class="mb-4">
                            <label class="block mb-2 text-sm font-bold text-gray-700" for="file_upload">
                                选择文件
                            </label>
                            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="file_upload" type="file" accept=".pdf">

                            <!-- <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="small_size">选择文件</label>
                            <input class="block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="large_size" type="file"> -->

                        </div>

                        <div class="mb-4 text-center">
                            <button id="upload" class="w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline" type="button">
                                翻译
                            </button>
                        </div>
                    </form>
                    <!-- 请求结果输出 -->
                    <div class="px-8 bg-white rounded">
                        <div id="result">No Result.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 点击上传请求/translate接口 将文件上传到服务器
        // 上传按钮被点击事件
        $('#upload').click(function() {
            // 将请求结果更改为上传翻译中
            $('#result').html('上传翻译...').css('color', 'gray');

            // 获取文件
            var file = $('#file_upload')[0].files[0];
            // 创建FormData对象
            var formData = new FormData();
            // 将文件添加到FormData对象中
            formData.append('file', file);
            // 发送请求
            $.ajax({
                url: '/translate',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                    if (data['error']) {
                        // alert(data['error']);
                        // 显示错误信息，且更改颜色为红色
                        $('#result').html(data['error']).css('color', 'red');
                    } else {
                        // 处理请求结果
                        file = "<a href='" +  data['url'] + "'>下载：" + data['file'] + "</a>";
                        // $('#result').html(file);
                        // 显示请求结果，且更改颜色为绿色
                        $('#result').html(file).css('color', 'green');
                    }
                }
            });
        });
            
        // $('#file_upload').change(function() {
        //     var file = this.files[0];
        //     var formData = new FormData();
        //     formData.append('file', file);
        //     $.ajax({
        //         url: '/translate',
        //         type: 'POST',
        //         data: formData,
        //         processData: false,
        //         contentType: false,
        //         success: function(data) {
        //             if (data['error']) {
        //                 // alert(data['error']);
        //                 // 显示错误信息，且更改颜色为红色
        //                 $('#result').html(data['error']).css('color', 'red');
        //             } else {
        //                 // 处理请求结果
        //                 file = data['file'];
        //                 // $('#result').html(file);
        //                 // 显示请求结果，且更改颜色为绿色
        //                 $('#result').html(file).css('color', 'green');
        //             }
        //         }
        //     });
        // });
    </script>
</body>
</html>